<template>
  <div class="right-div">
    <div class="title">
      <span>评阅详情</span>
    </div>
    <a-row class="search">
      <a-col :span="24">
        <a-col :span="8">
          <label>评阅分数：</label>
          <a-input v-model:value="paramStore.fs" placeholder="请输入"></a-input>
        </a-col>
        <a-col>
          <a-button
            style="background: #136cc4; border-color: #136cc4"
            type="primary"
            @click="getList"
            >查询
          </a-button>
        </a-col>
      </a-col>
    </a-row>
    <div class="topic-table">
      <a-table
        :rowKey="record => record.index"
        :columns="columns"
        :data-source="data"
        :scroll="{ y: 'calc(40vh)' }"
        :pagination="false"
      >
        <template v-slot:bodyCell="{ column, record, index }">
          <template v-if="column.dataIndex == 'index'">
            <span>{{ (paramStore.page - 1) * paramStore.pageSize + (index + 1) }}</span>
          </template>
          <template v-if="column.dataIndex == 'progress'">
            <div class="progressDiv">
              <a-progress
                :stroke-color="{
                  '0%': '#0078FF',
                  '100%': '#14C5F3',
                }"
                :percent="(record.ztms || 0) && (record.pytms / record.ztms).toFixed(2) * 100"
              />
              <span
                >{{ (record.ztms || 0) && (record.pytms / record.ztms).toFixed(2) * 100 }}%</span
              >
            </div>
          </template>
          <template v-if="column.dataIndex == 'operation'">
            <span style="color: #136cc4; cursor: pointer" @click="toSee(record)"> 查看 </span>
          </template>
        </template>
      </a-table>
      <a-pagination
        :show-total="total => `共 ${total} 条`"
        :show-size-changer="false"
        show-quick-jumper
        v-model:current="paramStore.page"
        v-model:pageSize="paramStore.pageSize"
        :total="total"
        @change="getList"
        @showSizeChange="getList"
      />
    </div>
    <a-table
      :rowKey="record => record.index"
      :columns="gradeColumns"
      :data-source="gradeList"
      :scroll="{ y: 'calc(21vh)' }"
      :pagination="false"
    >
      <template v-slot:bodyCell="{ column, record, index }">
        <template v-if="column.dataIndex == 'index'">
          <span>{{ (gradeParamStore.page - 1) * gradeParamStore.pageSize + (index + 1) }}</span>
        </template>
        <template v-if="column.dataIndex == 'pjf'">
          <span>{{ parseFloat(record.pjf ?? 0).toFixed(4) }}</span>
        </template>
      </template>
    </a-table>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'List',
})
</script>
<script setup lang="ts">
import { onMounted, ref, getCurrentInstance, watch, reactive, computed } from 'vue'
import { getGradeStatistics } from '/@/api/grindTeacher'
import { paperInfoByKm } from '/@/api/qualityInspection'
import { getSpGradeStatistics, spPaperInfoByKm } from '/@/api/teacher-sp'
import { useUserStore } from '/@/store/modules/user'

const userStore = useUserStore()
const userInfo = computed(() => userStore.getUserInfo)
let { proxy } = getCurrentInstance()
const props = defineProps({
  activeKey: {
    type: String,
    default: '2',
  },
})
const { mittBus } = proxy
const treeItem = ref<any>({})

const paramStore = reactive({
  fs: null,
  name: '',
  pageSize: 10,
  page: 1,
})
const total = ref(0)
const data = ref([])

const staticColumns = [
  {
    title: '序号',
    dataIndex: 'index',
    key: 'index',
    align: 'center',
  },
  {
    title: '科目代码',
    dataIndex: 'kmdm',
    key: 'kmdm',
    align: 'center',
  },
  {
    title: '科目名称',
    dataIndex: 'kmmc',
    key: 'kmmc',
    align: 'center',
  },
  {
    title: '阅卷进度',
    dataIndex: 'progress',
    key: 'progress',
    align: 'center',
    width: 300,
  },
  {
    title: '评阅分数',
    dataIndex: 'sjdf',
    key: 'sjdf',
    align: 'center',
  },
  {
    title: '操作',
    dataIndex: 'operation',
    align: 'center',
    width: 80,
  },
]

const columns = ref()

const gradeColumns = [
  {
    title: '序号',
    dataIndex: 'index',
    key: 'index',
    align: 'center',
  },
  {
    title: '最高分',
    dataIndex: 'zgf',
    key: 'zgf',
    align: 'center',
  },
  {
    title: '最低分',
    dataIndex: 'zdf',
    key: 'zdf',
    align: 'center',
  },
  {
    title: '平均分',
    dataIndex: 'pjf',
    key: 'pjf',
    align: 'center',
  },
]

const gradeParamStore = reactive({
  pageSize: 10,
  page: 1,
})

const gradeTotal = ref(0)
const gradeList = ref(<any>[])
const getGradeList = async () => {
  try {
    let api: any = null
    if (props.activeKey == '2') {
      api = getGradeStatistics
    } else {
      api = getSpGradeStatistics
    }

    const res = await api(treeItem.value.node.dataRef.km, gradeParamStore)
    if (res?.data) {
      gradeList.value = res.data
    } else {
      gradeList.value = []
    }

    gradeTotal.value = 1
  } catch (error) {
    console.log(error)
  }
}

watch(props, () => {
  if (Object.keys(treeItem.value).length) {
    getGradeList()
    getList()
  }
})

// 获取评阅详情列表
const getList = () => {
  const params = {
    km: treeItem.value.node.dataRef.km,
    ...paramStore,
  }
  if (props.activeKey == '2') {
    paperInfoByKm(params).then(res => {
      if (res.code == 1) {
        console.log(res.data, 5555)
        data.value = res.data.rows
        total.value = res.data.total
      }
    })
    columns.value = staticColumns
    if (userInfo.value.userType != 1) {
      columns.value = staticColumns.filter(v => v.key != 'xm')
    }
  } else {
    spPaperInfoByKm(params).then(res => {
      if (res.code == 1) {
        data.value = res.data.rows
        total.value = res.data.total
      }
    })
    columns.value = [
      {
        title: '序号',
        dataIndex: 'index',
        key: 'index',
        align: 'center',
      },
      {
        title: '科目代码',
        dataIndex: 'kmdm',
        key: 'kmdm',
        align: 'center',
      },
      {
        title: '科目名称',
        dataIndex: 'kmmc',
        key: 'kmmc',
        align: 'center',
      },
      // {
      //   title: '试卷题型',
      //   dataIndex: 'sjtx',
      //   key: 'sjtx',
      //   align: 'center',
      // },
      {
        title: '阅卷进度',
        dataIndex: 'progress',
        key: 'progress',
        align: 'center',
        width: 300,
      },
      {
        title: '评阅分数',
        dataIndex: 'fs',
        key: 'fs',
        align: 'center',
      },
      {
        title: '操作',
        dataIndex: 'operation',
        align: 'center',
        width: 80,
      },
    ]
  }
}

const toSee = async row => {
  await mittBus.emit('seeItem')
  const params = {
    row: row,
    item: treeItem.value,
  }
  mittBus.emit('toDetail', params)
}
onMounted(() => {
  columns.value = staticColumns
  // 树组件选中
  mittBus.on('selectTreeItems', e => {
    treeItem.value = e
    getList()
    getGradeList()
  })
})
</script>
<style lang="less" scoped>
.search {
  padding: 15px;

  .ant-col {
    display: flex;
    align-items: center;
  }

  .ant-input,
  .ant-select {
    width: 70% !important;
  }
}

.right-div {
  height: 100%;
  overflow: auto;
  // .topic-table {
  //   height: 90%;
  // }
  // .ant-table-wrapper {
  //   max-height: 85%;
  //   overflow: auto;
  // }

  .progressDiv {
    width: 100%;
    display: flex;
    justify-content: space-between;

    span {
      color: #3f4355;
      font-size: 14px;
    }
  }
}

.item-bg {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  box-shadow: 0px 0px 6px 1px rgba(128, 144, 219, 0.16);
  border-radius: 6px 6px 6px 6px;
  position: relative;

  .title {
    width: 100%;
    padding: 16px;
    font-weight: bold;
    color: #3f4355;
    font-size: 16px;
    font-family: PingFang SC-Bold, PingFang SC;
    border-bottom: 2px solid #f0f1f8;
  }
}

// ::-webkit-scrollbar {
//   width: 0 !important;
//   -ms-overflow-style: none;
//   overflow: -moz-scrollbars-none;
// }
</style>
<style lang="less">
.right-div {
  .ant-table-thead .ant-table-cell {
    text-align: center;
    background: transparent;
    border: none;
  }

  .ant-table-cell::before {
    display: none !important;
  }

  .ant-progress {
    width: 100%;
  }

  .ant-progress-text {
    display: none;
  }

  .ant-pagination {
    margin-top: 20px;
  }
}
</style>
